<template>
    <div class="notice-list" v-loading="loading || switchLoading">
        <common-list @resert="resert" ref="commonListRef">
            <template #operate="{ scope }">
                <el-button link type="primary" size="small" @click="roleSetHandler(scope.scope.row)" v-if="mStore.btns.find((item) => item.name === '修改信息')">修改信息</el-button>
                <div class="line" />
                <el-button link type="primary" size="small" @click="goPageAuth(scope.scope.row)" v-if="mStore.btns.find((item) => item.name === '菜单权限')">菜单权限</el-button>
                <div class="line" />
                <el-button link type="primary" size="small" @click="goPageBtnAuth(scope.scope.row)" v-if="mStore.btns.find((item) => item.name === '按钮权限')">按钮权限</el-button>
                <div class="line" />
                <el-button link type="primary" size="small" @click="roleDelete(scope.scope.row)" v-if="mStore.btns.find((item) => item.name === '删除')">删除</el-button>
                <div class="line" />
                <el-button link type="primary" size="small" @click="roleGetHandler(scope.scope.row)" v-if="mStore.btns.find((item) => item.name === '详情')">详情</el-button>
            </template>
            <template #state="{ scope }">
                <el-switch
                    v-model="scope.scope.row.isEnable"
                    inline-prompt
                    active-text="开"
                    inactive-text="关"
                    :active-value="0"
                    :inactive-value="1"
                    :before-change="() => switchChange(scope.scope.row)"
                />
            </template>
            <template #btns>
                <div class="btns">
                    <el-button type="primary" @click="roleAddHandler" class="add-btn" v-if="mStore.btns.find((item) => item.name === '新增角色')">新增角色</el-button>
                    <w-button @click="roleAllDeletes" class="config-btn" v-if="mStore.btns.find((item) => item.name === '批量删除')">批量删除</w-button>
                </div>
            </template>
        </common-list>
        <w-popup
            :isShowPopup="isShowPopup"
            @close="isShowPopup = false"
            @confrim="popupConfrim(wFormRef, commonListRef, popFormData)"
            :title="type == 1 ? '新增角色' : type == 2 ? '修改角色' : '角色详情'"
            :loading="popLoading"
            :confrimText="type == 1 ? '提交' : type == 2 ? '提交' : '确定'"
        >
            <w-form :formConfig="popupConfig" :formData="popFormData" :rules="popupRules" ref="wFormRef"></w-form>
        </w-popup>
    </div>
</template>

<script setup>
import { provide, reactive, ref } from "vue";
import { tableConfig, formConfig, popupFormSetConfig, popupRules, popupFormGetConfig } from "./config";
import { getRole, addRoles, setRoles, deleteRole } from "@/service/api/role.js";
import { useTableDelete, useTableOperate } from "@/hooks/useTable.js";
import wButton from "@/components/wButton.vue";
import wPopup from "@/components/wPopup.vue";
import { useRouter } from "vue-router";
import { mainStore } from "@/store/main.js";

const mStore = mainStore();
const switchLoading = ref(false);
const router = useRouter();
const commonListRef = ref(null);
const wFormRef = ref(null);
const formData = reactive({ roleName: "", roleCode: "", roleStatus: "" });
let popFormData = reactive({ name: "", code: "", isEnable: "", id: 0 });
const { deletes, loading } = useTableDelete(deleteRole, () => {
    commonListRef.value.tableRef.getTableList();
    commonListRef.value.tableRef.allSelectTable = [];
});
const { popupConfrim, type, popLoading, isShowPopup, popupConfig, getHandler, setHandler, addHandler } = useTableOperate(
    { setApi: setRoles, addApi: addRoles },
    { popupFormSetConfig, popupFormGetConfig }
);
const switchChange = async (row) => {
    switchLoading.value = true;
    popFormData.name = row.name;
    popFormData.code = row.code;
    popFormData.id = row.id;
    popFormData.isEnable = row.isEnable === 1 ? 0 : 1;
    const res = await setRoles(popFormData);
    switchLoading.value = false;
    if (res.code === 200) {
        ElMessage({
            message: "修改成功",
            type: "success"
        });
        return true;
    }
};
const roleAddHandler = () => {
    addHandler(() => {
        popFormData = reactive({ name: "", code: "", isEnable: "", id: 0 });
    });
};
const roleSetHandler = (row) => {
    setHandler(() => {
        popFormData.name = row.name;
        popFormData.code = row.code;
        popFormData.id = row.id;
        popFormData.isEnable = row.isEnable;
    });
};
const roleGetHandler = (row) => {
    getHandler(() => {
        popFormData.name = row.name;
        popFormData.code = row.code;
        popFormData.isEnable = row.isEnable;
    });
};
const roleDelete = (row) => {
    deletes({
        roleId: row.id
    });
};

const roleAllDeletes = () => {
    const ids = commonListRef.value.tableRef.allSelectTable.flat().map((item) => item.id);
    if (!ids.length) {
        ElMessage.error("请先勾选");
        return;
    }
    deletes({
        roleId: ids.join(",")
    });
};
const goPageAuth = (row) => {
    router.push(`/main/roleManage/role?roleId=${row.id}&type=1`);
};
const goPageBtnAuth = (row) => {
    router.push(`/main/roleManage/role?roleId=${row.id}&type=2`);
};
const resert = () => {
    Object.keys(formData).forEach((key) => (formData[key] = ""));
};

provide("formData", formData);
provide("formConfig", formConfig);
provide("tableConfig", tableConfig);
provide("apiFn", getRole);
provide("includeName", []);
provide("title", "角色明细");
</script>

<style lang="less" scoped>
.notice-list {
    height: 100%;
    .line {
        display: inline-block;
        margin: 0 13px;
        width: 1px;
        height: 8px;
        border: 1px solid #dcdcdc;
    }
    .btns {
        display: flex;
        .add-btn,
        .config-btn {
            width: 106px;
            height: 32px;
        }
    }
}
</style>
